<template>
  <view class="yhq_view">
    <view class="yhq_view_tab">
      <text v-bind:class="{ current: isCurrent == 1 }" @click="QueryUserCoupon(1)">全部优惠券</text>
<!--      <text v-bind:class="{ current: isCurrent == 2 }" @click="QueryUserCoupon(2)">已过期</text> -->
      <text v-bind:class="{ current: isCurrent == 3 }" @click="QueryUserCouponOrder(3)">已使用</text>
    </view>
    <view class="yhq-box" v-show="isCurrent == 1">
      <!-- 可用优惠券 -->
      <view class="yhq-has">
        <view v-show="isCurrent == 1">
          <view class="yhq-bg" v-for="(item, index) in yhqlist" v-bind:class="{
                  all:
                    item.Coupon_type == 1 ||
                    (item.Coupon_type == 2 && item.Cfg_Package_id == 0),
                    'yhq-bg-over':isover(item)
                }" v-bind:key="index" v-show="
                  item.Coupon_type == 1 ||
                  (item.Coupon_type == 2 && item.Cfg_Package_id == 0) ||
                  item.Coupon_type == 3 ||
                  (item.Coupon_type == 4 && item.Cfg_Package_id > 0)
                ">
            <view class="yhq_box_left">
              <view class="lottry">
                <view class="tmtc" v-show="
                        item.Coupon_type == 3 ||
                        (item.Coupon_type == 4 && item.Cfg_Package_id > 0)
                      ">
                  <view v-if="item.Coupon_type == 1 || item.Coupon_type == 4">
                    最高减<text>{{ `${item.Cfg_Params_1 / 100}` }}</text>元
                  </view>
                  <view v-if="item.Coupon_type == 1 || item.Coupon_type == 3">
                    最高减<text>2000</text>元
                  </view>

                </view>

                <view class="inlottry-bd">
                  <view class="name01" v-show="item.Cfg_Params_2 > 0">
                    <text class="icon_bg" v-if="item.Coupon_type == 2 || item.Coupon_type == 4">满减券</text>
                    <text class="icon_bg" v-if="item.Coupon_type == 1 || item.Coupon_type == 3">折扣券</text>
                    <text> {{ `满${item.Cfg_Params_2 / 100}可用` }}</text>
                  </view>

                  <view class="rd" v-bind:title="item.Coupon_name">
                    {{ item.Coupon_name }}
                  </view>

                  <view class="name02" v-if="item.Coupon_type == 3 || item.Coupon_type == 4">
                    限品类
                  </view>

                  <view class="name02" v-if="item.Coupon_type == 1 || item.Coupon_type == 2">
                    全品类
                  </view>

                  <view class="priceCenter" v-if="item.Cfg_Use_type == 1">
                    <text>{{ creatTime(item.Cfg_Use_stime) }}</text>
                    ~
                    <text>{{
                          creatTime(item.Cfg_Use_etime)
                        }}</text>
                  </view>
                  <view class="priceCenter" v-if="item.Cfg_Use_type == 2">
                    {{ recTime(item.Rec_time, item.Cfg_Use_times) }}
                  </view>
                </view>
                <view class="inlottry-hd">
                  <view class="priceHd">
                    <view class="priceHd_price" v-if="item.Coupon_type == 2 || item.Coupon_type == 4">
                      <text>{{ `${item.Cfg_Params_1 / 100}` }}</text>
                      <text>￥</text>
                    </view>
                    <view class="priceHd_price" v-if="item.Coupon_type == 1 || item.Coupon_type == 3">
                      <text>{{ `${item.Cfg_Params_1 / 10}` }}</text>
                      <text>折</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 可用优惠券 -->
    </view>
    <!-- 已经过期优惠券 -->
   <!-- <view class="yhq-box" v-show="isCurrent == 2">
      <view class="yhq-box-hd">
        <text>优惠券</text><text>类型</text><text>到期时间</text>
      </view>
      <view class="yhq-box-bd">
        <view class="yhq-box-bd-item" v-for="(item,index) in ExpiredLists" v-bind:key="index">
          <text>{{ item.Coupon_name }}</text>
          <text v-if="item.Coupon_type == 2 || item.Coupon_type == 4">满减券</text>
          <text v-if="item.Coupon_type == 1 || item.Coupon_type == 3">折扣券</text>
          <view class="endTime" v-if="item.Cfg_Use_type == 1">
            <text>{{ creatTime(item.Cfg_Use_stime) }}</text>
            <text>至</text>
            <text>{{ creatTime(item.Cfg_Use_etime) }}</text>
          </view>
          <view class="endTime" v-if="item.Cfg_Use_type == 2">
            {{ recTime(item.Rec_time, item.Cfg_Use_times) }}
          </view>
        </view>
      </view>
    </view> -->
    <!-- 已经过期优惠券 -->
    <!-- 已使用优惠券 -->

    <view class="use-yhq" v-show="isCurrent == 3">
      <view class="use-yhq-hd">
        <text>优惠券</text>
        <text>类型</text>
        <text>使用日期</text>
        <text>使用订单</text>
      </view>
      <view class="use-yhq-bd">
        <view class="row" v-for="(item, index) in useLists" v-bind:key="index">
          <text>{{ item.Coupon_name }}</text>
          <text v-if="item.Coupon_type == 2 || item.Coupon_type == 4">满减券</text>
          <text v-if="item.Coupon_type == 1 || item.Coupon_type == 3">折扣券</text>
          <view class="timer">{{ creatTime(item.Use_time) }}</view>
          <text>{{ item.Use_Order_id }}</text>
        </view>
      </view>
    </view>

    <!-- 已使用优惠券 -->
  </view>
</template>

<script>
  import md5 from "js-md5"
  export default {
    data() {
      return {
        yhqlist: [],
        isCurrent: 1,
        ExpiredLists: '',
        useLists: [],
        useLists: [],
        isOver:false
      };
    },
    onShow() {
      this.QueryUserCoupon(1);

    },
    methods: {
      isover(item){
        if(item.Cfg_Use_type == 1){
          var date = new Date(
            parseInt(item.Cfg_Use_etime.replace("/Date(", "").replace(")/", ""), 10)
          );
          var nowdate=new Date();
          console.log(nowdate,date)
          if(nowdate>=date){
             return true;
          }else{
            return false;
          }
        }else if(item.Cfg_Use_type == 2){
          var date = new Date(
            parseInt(item.Rec_time.replace("/Date(", "").replace(")/", ""), 10)
          );
           var ms = date.getTime() + item.Cfg_Use_times * 1000;
           
           var ms2=new Date().getTime()
           if(ms>=ms2){
             return false
           }else{
             return true
           }
        }
     
      },
      creatTime(timestamp) {
        var date = new Date(
          parseInt(timestamp.replace("/Date(", "").replace(")/", ""), 10)
        );
        var Y = date.getFullYear() + "-";
        var M =
          (date.getMonth() + 1 < 10 ?
            "0" + (date.getMonth() + 1) :
            date.getMonth() + 1) + "";
        var D =
          (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
        var h =
          (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
        var m =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var s =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        return Y + M + "-" + D + h + m;
      },
      recTime(time1, time2 = 0) {
        var date = new Date(
          parseInt(time1.replace("/Date(", "").replace(")/", ""), 10)
        );
        // console.log(date.getTime())
        if (time2) {
          var ms = date.getTime() + time2 * 1000;
        } else {
          var ms = date.getTime();
        }

        return this.getDateStr(ms);
      },
      getDateStr(ms) {
        if (ms) {
          var date = new Date(ms);
        } else {
          var date = new Date();
        }
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
        var minute =
          date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
        var second =
          date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
        var currentTime =
          year + "-" + month + "-" + day + "  " + hour + ":" + minute;
        // +
        // ":" +
        // second;
        return currentTime;
      },
      //时间比较
      comptime(nowDate, lastDate) {
        var a = (Date.parse(nowDate) - Date.parse(lastDate)) / 3600 / 1000;
        if (a < 0) {
          return 1;
        } else if (a >= 0) {
          return 2;
        }
      },
      async QueryUserCoupon(val) {
        this.isCurrent = val;
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=queryusercoupon&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5})}`
        )
        const {
          data: res
        } = result;
        console.log('yhq', res);
        if (res.code == 0) {
          if (val == 1) {
            this.yhqlist=res.data.list;
            // res.data.list.forEach((current) => {
            
            //   if (current.Cfg_Use_type == 1) {
            //     if (this.comptime(
            //         this.getDateStr(),
            //         this.recTime(current.Cfg_Use_etime)
            //       ) === 1) {
            //       console.log('kkv', current)
            //       this.yhqlist.push(current)
            //     }
            //   } else if (current.Cfg_Use_type == 2) {
              
            //     if (this.comptime(
            //         this.getDateStr(),
            //         this.recTime(current.Rec_time, current.Cfg_Use_times)
            //       ) === 1) {
            //       console.log('kkv2', current)
                 
            //     }
            //   }
            // });

          } 
          console.log('李玉林', this.yhqlist)
        }
      },
      //查询用户已经使用优惠券
      async QueryUserCouponOrder(val) {
        this.isCurrent = val;
        const uid = JSON.parse(uni.getStorageSync('userinfo')).userId;
        const signMd5 = md5(`Bid=65&UserId=${uid}&key=C63A39419CE64F258ADFE3FAF5E63477`);;
        const result = await uni.$http.get(
          `/WebApi/Wap/Action?t=queryusercouponorder&data=${JSON.stringify({Bid:65,UserId:uid,Sign:signMd5})}`
        )
        console.log(result)
        const {
          data: res
        } = result;
        if (res.code == 0) {
          this.useLists = res.data.list;
        }
      }
    }
  }
</script>

<style lang="scss">
  body {
    background-color: #fff;
  }

  .yhq_view {
    width: 100%;
    overflow: hidden;
    zoom: 1;

    .yhq_view_tab {
      height: 155rpx;
      line-height: 155rpx;
      padding: 0 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-around;

      text {
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        position: relative;

        &.current {
          color: #FFA000;
        }

        &.current::after {
          content: "";
          width: 98rpx;
          height: 4rpx;
          background: #FFA000;
          font-weight: bold;
          border-radius: 2px;
          position: absolute;
          bottom: 35rpx;
          left: 50%;
          transform: translate(-50%);
        }
      }
    }

    .yhq-box {
      width: 690rpx;
      margin: 0 auto;
      overflow: hidden;
      zoom: 1;

      .yhq-box-hd {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;

        text {
          flex: 1;
          text-align: center;
          font-size: 26rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: #666;
        }
      }

      .yhq-box-bd {
        padding: 0 20rpx;

        .yhq-box-bd-item {
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          font-size: 26rpx;
          margin-top: 40rpx;

          text {
            flex: 1;
            text-align: center;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999;

          }

          .endTime {
            flex: 1;
            text-align: center;
            font-size: 26rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #999;
          }
        }
      }

      .yhq-has {
        width: 692rpx;
        margin: 0 auto;
     
        .yhq-bg {
          width: 648.5rpx;
          height: 163rpx;
          padding: 20rpx 0rpx 20rpx 33rpx;
          margin-top: 40rpx;
          background-image: url(https://img.5211game.com/Base/xiaochengxu/static/yhq.png);
          background-size: contain;

          .lottry {
            width: 657rpx;
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            position: relative;

            .tmtc {
              font-size: 26rpx;
              font-family: PingFang SC;
              font-weight: 500;
              position: absolute;
              top: 0rpx;
              right: 220rpx;
              color: #EA586D;
            }


            .inlottry-bd {
              width: 72%;
              height: 163rpx;
              display: flex;
              flex-direction: column;

              .rd {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666;
                margin: 6rpx 0;
              }

              .name01 {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #666666;
                display: flex;
                justify-content: flex-start;

                .icon_bg {
                  width: 87rpx;
                  height: 28rpx;
                  line-height: 28rpx;
                  text-align: center;
                  background: #FFEBF0;
                  border: 1rpx solid #ED7E90;
                  border-radius: 4rpx;
                  font-size: 20rpx;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #EA586D;
                  margin-right: 10rpx;
                }
              }

              .name02 {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: bold;
                color: #E9445A;
                margin: 6rpx 0;
              }

              .priceCenter {
                font-size: 24rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: #999999;
              }
            }

            .inlottry-hd {
              width: 28%;

              .priceHd_price {
                width: 100%;
                height: 163rpx;
                text-align: center;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                font-size: 40rpx;
                font-family: PingFang SC;
                font-weight: 800;
                color: #E9445A;
              }

            }
          }
        }
        .yhq-bg-over{
          width: 648.5rpx;
          height: 163rpx;
          padding: 20rpx 0rpx 20rpx 33rpx;
          margin-top: 40rpx;
          background-image: url(https://img.5211game.com/Base/xiaochengxu/static/ygq-yhq.png);
          background-size: contain;
          .yhq_box_left{
            .lottry{
              .rd{
                 color: #ccc;
              }
              .name01{
                  color: #ccc;
                  .icon_bg{
                    border: 1rpx solid #ccc;
                    background-color:#999;
                    color: #ccc;
                  }
              }
              .name02{
                color: #ccc;
              }
              .priceHd_price{
                 color: #ccc;
              }
              .tmtc{
                color: #ccc;
              }
           
            }
          }
         
        }
      }
    }

  }

  .use-yhq-hd {
    width: 100%;
    display: flex;
    justify-content: row;

    text {
      flex: 1;
      text-align: center;
      text-align: center;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #666;
    }
  }

  .use-yhq-bd {
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;

    .row {
      display: flex;
      justify-content: row;
      margin-top: 40rpx;

      text {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999;
      }

      .timer {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #999;
      }
    }
  }
</style>
